<template>
  <el-container>
    <el-header><h2>{{ UpdateTime }}</h2></el-header>
    <el-header>省级分布</el-header>
    <el-main>
      <map-china ref="chinaMap" :china-map-data="chinaMapData" />
    </el-main>
    <el-header>地级分布</el-header>
    <el-main>
      <el-select v-model="province" class="filter-item" @change="handleFilter">
        <el-option v-for="item in provinces" :key="item.key" :label="item.name" :value="item.pinyin" />
      </el-select>
      <map-city ref="mychild" :provinces="provinces" />
    </el-main>
  </el-container>
</template>

<script>
import MapChina from './components/MapChina'
import MapCity from './components/MapCity'
import result from '@/api/map'
export default {
  name: 'Home',
  components: { MapChina, MapCity },
  filters: {
    formatRate(value) {
      if (value) {
        return value + '%'
      } else {
        return '-'
      }
    }
  },
  data() {
    return {
      UpdateTime: '2020-01-08',
      provincesPinyin: [
        'shanghai',
        'hebei',
        'shanxi',
        'neimenggu',
        'liaoning',
        'jilin',
        'heilongjiang',
        'jiangsu',
        'zhejiang',
        'anhui',
        'fujian',
        'jiangxi',
        'shandong',
        'henan',
        'hubei',
        'hunan',
        'guangdong',
        'guangxi',
        'hainan',
        'sichuan',
        'guizhou',
        'yunnan',
        'xizang',
        'shanxi1',
        'gansu',
        'qinghai',
        'ningxia',
        'xinjiang',
        'beijing',
        'tianjin',
        'chongqing',
        'xianggang',
        'aomen',
        'taiwan'
      ],
      provincesText: [
        '上海',
        '河北',
        '山西',
        '内蒙古',
        '辽宁',
        '吉林',
        '黑龙江',
        '江苏',
        '浙江',
        '安徽',
        '福建',
        '江西',
        '山东',
        '河南',
        '湖北',
        '湖南',
        '广东',
        '广西',
        '海南',
        '四川',
        '贵州',
        '云南',
        '西藏',
        '陕西',
        '甘肃',
        '青海',
        '宁夏',
        '新疆',
        '北京',
        '天津',
        '重庆',
        '香港',
        '澳门',
        '台湾'
      ],
      province: '',
      provinces: [], // 地级分布省份
      chinaMapData: [], // 表格-省份/省份地图数据
      cityMapData: [] // 城市地图数据
    }
  },
  watch: {
    province(newValue, oldValue) {
      console.log("new: %s, old: %s", newValue, oldValue);
    }
  },
  created() {
    // console.log(result)
  },
  mounted() {
    this.getMap()
  },
  methods: {
    getMap() {
      var allData = result.data.provinces
      allData = this.formatePinyin(allData)
      if(allData.length > 1) {
        allData.sort(this.down('value')) // 排序
      }
      this.province = allData[0].pinyin // 选中
      this.provinces = allData // select

      this.chinaMapData = allData // 省份地图/省份数据

      this.cityMapData = allData[0].citys
      if(this.cityMapData.length > 1){
        this.cityMapData.sort(this.down('value'))
      }
      this.$nextTick(() => {
        if (this.chinaMapData && this.chinaMapData.length) {
          if (this.$refs.chinaMap) {
            this.$refs.chinaMap.initChart()
          }
        }
        if (this.province && this.cityMapData && this.cityMapData.length) {
          if (this.$refs.mychild) {
            this.$refs.mychild.initChart(this.province, this.cityMapData)
          }
        }
      })
    },
    down(name) {
      return function(obj1, obj2) {
        const val1 = obj1[name]
        const val2 = obj2[name]
        return val2 - val1
      }
    },
    /*
      给省份添加拼音字段
    */
    formatePinyin(data) {
      if (!data) return
      for (var i = 0; i < data.length; i++) {
        for (var j = 0; j < this.provincesText.length; j++) {
          if (data[i].name.indexOf(this.provincesText[j]) > -1) {
            data[i].name = this.provincesText[j]
            data[i].pinyin = this.provincesPinyin[j]
            continue
          }
        }
      }
      return data
    },
    handleFilter(value) {
      this.province = value
      var list = []
      for (var k = 0; k < this.provinces.length; k++) {
        if (this.provinces[k].pinyin === this.province) {
          list = this.provinces[k]
        }
      }
      this.cityMapData = list.citys
      if(this.cityMapData.length >1){
        this.cityMapData.sort(this.down('value'))
      }
      this.$refs.mychild.initChart(this.province, this.cityMapData)
    },
    agoDate() { // 前一天
      var endDate = new Date()
      endDate.setDate(endDate.getDate() - 1)
      var month = endDate.getMonth() + 1
      month = month < 10 ? '0' + month : month
      var date = endDate.getDate()
      date = date < 10 ? '0' + date : date
      return endDate.getFullYear() + '-' + month + '-' + date
    }
  }
}
</script>
<style>
main {
  min-height: 20vh;
}
.el-header {
  font-size: 20px;
  line-height: 60px;
}
</style>

